<template>
  <el-select>
    <div class="icon-select">
      <el-option v-for="item in list" :key="item" :value="item">
        <el-icon size="24"><component :is="item"></component></el-icon>
      </el-option>
    </div>
  </el-select>
</template>

<script>
import * as ElementPlusIconsVue from "@element-plus/icons-vue";

export default {
  name: "IconSelect",

  data() {
    return {
      list: Object.keys(ElementPlusIconsVue).splice(0, 50),
    };
  },
};
</script>

<style lang="scss" scoped>
.icon-select {
  display: flex;
  flex-wrap: wrap;
  padding: 0 5px;

  .el-select-dropdown__item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    height: 50px;
    width: 50px;
    border-radius: 4px;
  }
}
</style>
